<template>
  <view class="shopcartContainer">
    <!-- 商品类型 -->
    <view class="shopcartTitle">一般商品</view>
    <!-- 购物车列表 -->
    <view class="cartList">
      <view class="cartItem" v-for="(cart,index) in cartList" :key="index">
        <i class="iconfont icon-xuanzhong" :class={active:cart.isChecked} @click="changeChecked(cart)"></i>
        <image class="itemImg" :src="cart.images[0]" mode=""></image>
        <view class="itemContent">
          <view class="itemTitle">{{cart.name}}</view>
          <view class="itemPrice">￥{{cart.price}}</view>
          <text class="del" @click="changeNum(cart,-1,index)">－</text>
          <text class="itemNum">{{cart.count}}</text>
          <text class="add" @click="changeNum(cart,1,index)">＋</text>
          <i class="iconfont icon-shanchu" @click="deleteGoods(cart,index)"></i>
        </view>
      </view>
    </view>
    
    <!-- 底部下单 -->
    <view class="cartFooter">
    	<i class="iconfont icon-xuanzhong" :class="{active:isCheckAll}" @click="changeAllCheck"></i>
      <text class="all">全选</text>
    	<text class="allPrice">总计: {{allPrice}}</text>
    	<text class="preOrder">去结算({{allNum}}件)</text>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
  export default {
    data() {
      return {
        cartList: uni.getStorageSync('cartList') || [],
        userInfo: uni.getStorageSync('userInfo') || {}
      }
    },
    methods: {
      //更改数量
      changeNum(cart,num,index){
        cart.count += num
        cart.isChecked = true
        uni.setStorageSync('cartList',this.cartList)
        if(cart.count <= 0){
          this.deleteGoods()
        }
      },
      
      //删除商品
      deleteGoods(cart,index){ 
        uni.showModal({
          title:'提示',
          content:`你确定要删除${cart.name}吗`,
          success:(res)=>{
            if(res.confirm){
              this.cartList.splice(index,1) 
              uni.setStorageSync('cartList',this.cartList)
            }else{
              cart.count = 1
            }
          }
        })
      },
      
      // 更改单品选中状态
      changeChecked(cart){
        cart.isChecked = !cart.isChecked
        uni.setStorageSync('cartList',this.cartList)
      },
      
      // 更改全选选中状态
      changeAllCheck(){
        this.isCheckAll = !this.isCheckAll
      }
    },
    computed:{
      //总数
      allNum () {
        return this.cartList.reduce((pre,cur)=>{
          if(cur.isChecked){
            pre+=cur.count
          }
          return pre
        },0)
      },
      //总价
      allPrice () {
          return this.cartList.reduce((pre,cur)=>{
          if(cur.isChecked){
            pre+=cur.count * cur.price
          }
          return pre
        },0)
      },
      //全选
      isCheckAll:{
        get(){
          return this.cartList.every(item => item.isChecked === true)
        },
        set(val){
          console.log(val);
          this.cartList.forEach(item=>item.isChecked = val)
          uni.setStorageSync('cartList',this.cartList)
        }
      }
    },
    onShow(){
      if(!this.   .nickName){
        uni.redirectTo({
          url:'/pages/login/login'
        })
      }
      this.cartList = uni.getStorageSync('cartList')
      console.log(this.cartList,'@@');
    }
  }
</script>

<style lang="stylus">
.shopcartContainer
  height: 100%
  background-color: #ddd
  .shopcartTitle
    height: 66upx
    line-height: 66upx
    font-size: 26upx
    background-color: #fff
    border-top: 20upx solid #ddd
    margin-bottom: 2upx
  .cartList
    height: 100%
    .cartItem
      height: 182upx
      width: 100%
      display: flex
      background-color: #fff
      position: relative
      .iconfont
        margin: 60upx 0 0 20upx
        color: #000
        &.active
          color: #109f53
      .itemImg
        width: 136upx
        height: 136upx
        flex-shrink: 0
        border: 2upx solid #ddd
        margin-top: 20upx
        margin-left: 20upx
      .itemContent
        height: 100%
        margin-top: 20upx
        margin-left: 20upx
        .itemTitle
          font-size: 28upx
        .itemPrice
          font-size: 26upx
          padding-bottom: 10upx
          padding-top: 10upx
          color: red
        .del
          width: 48upx
          height: 48upx
          border: 2upx solid #ddd
          display: inline-block
        .add
          width: 48upx
          height: 48upx
          border: 2upx solid #ddd
          display: inline-block
        .itemNum
          width: 84upx
          height: 48upx
          border: 2upx solid #ddd
          display: inline-block
          text-align: center
        .iconfont
          font-size: 40upx
          position: absolute
          top: 56upx
          right: 20upx
  .cartFooter
    display: flex
    position: fixed
    bottom: 0
    left: 0
    background-color: #fff
    height: 122upx
    width: 100%
    background-color: #ddd
    .iconfont
      margin: 20upx 20upx
      color: #000
      &.active
        color: #109f53
    .all
      font-size: 26upx
      padding-top: 36upx
      width: 100upx
    .allPrice
      padding-left: 80upx
      padding-top: 30upx
      color: red
      width:220upx
    .preOrder
      margin-left: 78upx
      padding-top: 40upx
      display: block
      width: 220upx
      height: 100upx
      color: #fff
      background-color: #fb5f39
      text-align: center
      font-size: 32upx
</style>
